<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mixins</title>
    <script type="text/javascript" src="../assets/js/vue-2.3.0.js"></script>
</head>

<body>
    <h1>mixins混入</h1>
    <hr>
    <div id="app">
        <p>num:{{ num }}</p>
        <P>
            <button @click="add">增加数量</button>
        </P>
    </div>
</body>
<script type="text/javascript">
//全局混入早于混入和构造器里的方法
    Vue.mixin({
        updated: function () {
            console.log('我说全局混入的');
        }
    })

    var addlog = {
        updated: function () {
            console.log('newNum' + this.num);
        }
    }
    var app = new Vue({
        el: '#app',
        data: {
            num: 3
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function () {
            console.log("构造器里的updated方法。")
        },
        mixins: [addlog]  //局部混入
    })

</script>

</html>